<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="#" method="get">
    <input type="password" name="c">
    <!--    required：必须是提交按钮才会触发-->
    <input type="text" name="a" onfocus="selectAll(event)" required>
    <input type="number" name="b">
    <button type="button" onclick="add()">每次增加5</button>
    <button type="submit" onclick="return submit1()">提交</button>
</form>
<script>
    let form = document.querySelector("form");
    console.log(form.action, form.method, form.elements, form.elements.length, form.length)
    // 获取name为a的input标签
    console.log(document.querySelector("input[name='a']")); // 耗时最长，因为是在整个页面中寻找
    console.log(form.elements[0]); // 不推荐
    console.log(form.elements.namedItem("a"));
    console.log(form["a"]);
    console.log(form.querySelector("input[name='a']"))

    function selectAll(e) {
        // 获取触发事件的标签
        e.target.select();
    }

    function submit1() {
        // 获c的内容
        let cVal = form["c"].value;
        let bVal = form["b"].value;
        // c的内容不能为空
        if (cVal == "") {
            alert("c不能为空");
            return false; // return是提前返回函数，所以只能写在函数中
        }
        if (bVal == "") {
            alert("b不能为空");
            return false; // return是提前返回函数，所以只能写在函数中
        }
        form.submit(); // 比较常用
    }

    function add() {
        form["b"].stepUp(5);
    }

</script>
</body>
</html>